スタイルシートとJava Scriptを使用すると、ホームページ全体の表示倍率を拡大／縮小できます。文字だけのサイズであれば、[表示]メニューから変更することも可能ですが、今回紹介するテクニックは画像も含めた形でページ全体の表示倍率を変更してくれます。サイズが大きいページをA4の用紙に印刷する場合など、活用できる場面はいろいろと考えられると思います。ぜひ試してみてください。
まずは、ページ全体の表示倍率を選択させるためのセレクトボックスを作成します。これは「SELECT」タグを使用し、以下のようにHTMLを記述するだけでOKです。もちろん、選択可能な倍率や選択肢の数は自由に変更できます。各自の好みに合わせてカスタマイズしてください。
<SELECT>
<OPTION value="80%">80%
<OPTION value="100%" selected>100%
<OPTION value="125%">125%
<OPTION value="150%">150%
<OPTION value="200%">200%
<OPTION value="300%">300%
</SELECT>
続いて、先ほど作成したセレクトボックスに表示倍率の変更機能を追加します。ページ全体の表示倍率は「document.body.style.zoom」で変更します。今回は、セレクトボックスが操作された時点で表示倍率を変更するので、onChangeイベントを使用します。「document.body.style.zoom」の値は、「this.options[this.selectedIndex].value」と記述しておけば、セレクトボックスで選択した倍率が自動的に指定されます。以上で、ページ全体の表示倍率を変更する機能の完成です。
<SELECT onChange="document.body.style.zoom=this.options[this.selectedIndex].value">
